import React from "react";
import { FC } from "react";
import { IHotSong } from "../../../store/actions/hotsongs.action";
import "./hotsongslistitem.css";

interface IProps {
  item: IHotSong;
}

const HotSongsListItem: FC<IProps> = ({ item }) => {
  return (
    <div className="songs-list-item">
      <div className="item-content">
        <div className="song-name">
          {item.name}
        </div>
        <div className="song-detail">
          <i className="u-hmsprt sghot"></i>
          <span>
            {item.ar.map((artist: any) => artist.name).join(" / ")}
          </span>{" "}
          - <span>{item.al.name}</span>
        </div>
        <div className="play-btn u-hmsprt sgchply"></div>
      </div>
    </div>
  );
};

export default HotSongsListItem;
